<template>
	<view class="content" :style="childList.length>0?'padding-top:150rpx':''">
		<view class="top-tabs-list-box">
			<u-tabs :list="list" active-color="#181818" height="50" inactive-color="#868686" 
			:is-scroll="true" :current="cur" @change="change($event,1)"></u-tabs>
			
			<u-tabs v-if="childList.length>0" :list="childList" active-color="#181818" height="50" inactive-color="#868686"
			:is-scroll="true" :current="childCur" @change="change($event,2)"></u-tabs>
		</view>
		<view :class="['pluge-lection-box',{active:childList.length>0}]">
			<pluge-lection @getSort="getSort"></pluge-lection>
		</view>
		<goods-list :getDataList="getDataList"></goods-list>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import plugeLection from '@/components/goodsList/plugeLection.vue';
	import goodsList from '@/components/goodsList/goodsList.vue';
	export default {
		components:{
			plugeLection,
			goodsList
		},
		data(){
			return {
				getDataList:[],//产品列表数据
				list: [],//产品一级分类
				childList: [],//产品二级分类
				cur: 0,
				childCur: 0,
				sexid:0,
				sortId:0,//分类ID
				page:1,
				limit:10,
				cid:0,
				sale:"",//销量
				price:"",//价格
			}
		},
		onLoad(options) {
			uni.showLoading({title:"加载中"});
			this.sexid = options.sexid;
			this.cid = options.cid;
			this.getproductCate();
		},
		methods:{
			getSort(e){
				uni.showLoading({title:""});
				this.page=1;
				this.getDataList = [];
				if(e.type=='sale'){
					this.sale = e.sort;this.price = "";
				}else if(e.type=='price'){
					this.price = e.sort;this.sale = "";
				}else{
					this.price = "";this.sale = "";
				}
				this.getProductLst();
			},
			getproductCate(){//产品分类
				let _this = this;
				_this.$u.api.productCateApi({pid:_this.cid}).then(res=>{
					if(res.code==1){
						console.log('产品分类：',res);
						res.data.forEach(item=>{
							if(item.children.length>0){
								_this.childList = item.children;
								console.log(_this.childList,'i');
								_this.childList.forEach(newItem=>{
									_this.sortId = newItem.store_category_id;
								});
							}else{
								_this.sortId = item.store_category_id;
							}
						});
						_this.list = res.data;
						_this.getProductLst();
					}
				});
			},
			getProductLst(){ //产品列表
				this.$u.api.productLstApi({
					cid:this.sortId,
					sale:this.sale,
					price:this.price,
					sex:this.sexid,
					page:this.page,
					limit:this.limit
				}).then(res=>{
					if(res.code==1){
						if(this.page==1){
							console.log('产品列表：',res);
							this.getDataList = res.data;
						}else{
							if(res.data.length>0){
								this.getDataList = this.storeList.concat(res.data);
							}else{
								this.$refs.uToast.show({title: '没有更多了',position:'center'});
							}
						}
					}
				});
			},
			change(index,id) {
				console.log(index,id);
				if(id==1){
					this.cur = index;
					this.sortId = this.list[index].store_category_id;
					this.getProductLst();
				}else{
					this.childCur = index;
				}
			},
		},
		onReachBottom() {
			this.page++;
			uni.showLoading({title:"加载中"});
			this.getProductLst();	
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		font-family: Microsoft YaHei;
		padding-top: 100rpx;
		box-sizing: border-box;
		.top-tabs-list-box {
			position: fixed;top: 0;z-index: 100;
			width: 100%;
			padding: 20rpx 0;
			background: #fff;
		}
		.pluge-lection-box{
			position: fixed !important;
			top: 90rpx !important;
			z-index: 99;
			background: #fff;
		}
		.active{position: fixed !important;top: 150rpx !important;}
	}
</style>